<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建集点返红包活动</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称" prop="name" :required="true">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" :required="true">
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '20:00:00']"
                                    :disabled="id != ''">
                            </el-date-picker>
                        </el-form-item>
<!--                        <el-form-item label="集点任务周期" :required='true' class="tsradio">-->
<!--                          <el-radio-group v-model="form.cycle">-->
<!--                            <el-radio label="1" border size="medium">7天</el-radio>-->
<!--                            <el-radio label="2" border size="medium">15天</el-radio>-->
<!--                            <el-radio label="3" border size="medium">30天</el-radio>-->
<!--                          </el-radio-group>-->
<!--                        </el-form-item>-->
                        <el-form-item label="顾客需集满单数" class="tsradio">
                          <el-radio-group v-model="form.orderType" :disabled="id != ''">
                            <el-radio label="1" border size="medium">3单</el-radio>
                            <el-radio label="2" border size="medium">4单</el-radio>
                            <el-radio label="3" border size="medium">5单</el-radio>
                            <el-radio label="4" border size="medium">其他订单</el-radio>
                          </el-radio-group>
                          <div v-if="form.orderType=='4'" class="mar_t10">
                            <el-input v-model="form.orderNum" placeholder="请输入单数" :disabled="id != ''">
                              <template slot="append">单</template>
                            </el-input>
                          </div>
                        </el-form-item>
                        <el-form-item label="返红包金额" prop="moneyType" class="tsradio">
                          <el-radio-group v-model="form.moneyType" :disabled="id != ''">
                            <el-radio label="1" border size="medium">￥5</el-radio>
                            <el-radio label="2" border size="medium">￥10</el-radio>
                            <el-radio label="3" border size="medium">￥15</el-radio>
                            <el-radio label="4" border size="medium">其他金额</el-radio>
                          </el-radio-group>
                          <div v-if="form.moneyType=='4'" class="mar_t10">
                            <el-input v-model="form.money" placeholder="请输入金额" :disabled="id != ''">
                                <template slot="append">元</template>
                            </el-input>
                          </div>
                          <div class="lh16 yb_margin">集满多单难度较大，建议设置较大红包金额，以刺激顾客参加活动，提示复购</div>
                        </el-form-item>
<!--                        <el-form-item label="使用门槛"  prop="fullMoney" :required="true">-->
<!--                            <span class="mar_lr10">订单满</span>-->
<!--                            <el-input v-model="form.fullMoney" placeholder="请输入金额">-->
<!--                                <template slot="append">元</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
                        <el-form-item label="使用时间" :required='true'>
                            <div>
                                <el-radio v-model="form.timeType" label="1" :disabled="id != ''">固定日期</el-radio>
                            </div>
                            <div v-show="form.timeType=='1'" class="mar_b20">
                                <el-date-picker
                                        v-model="timeData2"
                                        type="datetimerange"
                                        align="right"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :default-time="['08:00:00', '23:59:59']"
                                        :disabled="id != ''">
                                </el-date-picker>
                            </div>
                            <div class="time_item mar_t10 flex">
                                <el-radio v-model="form.timeType" label="2" :disabled="id != ''">领券后</el-radio>
                                <el-input-number v-model="form.day" v-if="form.timeType=='1'" disabled controls-position="right" :min="1" :max="1000000"></el-input-number>
                                <el-input-number v-model="form.day" v-else controls-position="right" :min="1" :max="1000000"></el-input-number>
                                <span class="mar_l10">日内有效</span>
                                <div class="mar_l10 mar_t5"  v-show="form.timeType=='2'" >
                                    <el-checkbox-group v-model="form.isNextDay">
                                        <el-checkbox true-label="1" false-label="2">次日起</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                            <div class="yb_margin lh16">默认从今日起，如需次日有效请勾选次日起选项</div>
                        </el-form-item>
<!--                        <el-form-item label="活动对象" :required='true'>-->
<!--                            <el-radio-group v-model="form.people">-->
<!--                                <el-radio label="1" disabled>所有人均可领取</el-radio>-->
<!--                                <el-radio label="2" disabled>会员可领</el-radio>-->
<!--                                <el-radio label="3" disabled>指定标签用户可领</el-radio>-->
<!--                            </el-radio-group>-->
<!--                            <div class="mar_t10" v-show="form.people=='3'">-->
<!--                                <el-select v-model="form.userLabel" clearable multiple filterable allow-create placeholder="请选择标签">-->
<!--                                    <el-option  v-for="item in labelOptions" :key="item.id" :label="item.labelName" :value="item.id"></el-option>-->
<!--                                </el-select>-->
<!--                            </div>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="每日发放"  prop="grantNum" :required="true">-->
<!--                            <el-input v-model="form.grantNum" placeholder="请输入数量">-->
<!--                                <template slot="append">张</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="每天限领次数" :required='true'>-->
<!--                            <div class="time_item">-->
<!--                                <el-radio v-model="form.limitType" label="1">不限次数</el-radio>-->
<!--                                <el-radio v-model="form.limitType" label="2">每天限领</el-radio>-->
<!--                                <span v-show="form.limitType=='2'">-->
<!--                                    <el-input-number v-model="form.maxNum" controls-position="right" :min="1" :max="1000000"></el-input-number>-->
<!--                                    <span class="mar_l10">张</span>-->
<!--                                </span>-->
<!--                            </div>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="领取门槛" prop="orderMoney" :required="true">-->
<!--                            <span class="mar_lr10">订单满</span>-->
<!--                            <el-input v-model="form.orderMoney" placeholder="请输入金额">-->
<!--                                <template slot="append">元</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                      <el-form-item label="适用场景">-->
<!--                        <el-checkbox-group v-model="form.useType">-->
<!--                          <el-checkbox label="1">外卖</el-checkbox>-->
<!--                          <el-checkbox label="2">堂食</el-checkbox>-->
<!--                          <el-checkbox label="3">快餐</el-checkbox>-->
<!--                        </el-checkbox-group>-->
<!--                      </el-form-item>-->
                      <el-form-item label="活动门店" :required='true'>
                        <el-radio-group v-model="form.storeType">
                          <el-radio label="1">仅本店可用</el-radio>
                          <el-radio label="2">全店通用</el-radio>
                          <el-radio label="3">同步到门店</el-radio>
                        </el-radio-group>
                        <div v-show="form.storeType=='3'">
                          <el-scrollbar>
                            <div class="recordBox">
                              <el-table ref="multipleTable" :data="shopTable" tooltip-effect="dark" style="width: 100%">
                                <el-table-column prop="name" label="门店名称"></el-table-column>
                                <el-table-column prop="address" label="门店地址"></el-table-column>
                                <el-table-column label="操作">
                                  <template slot-scope="scope">
                                    <div class="textbutton">
                                      <el-button size="mini" type="text" @click="open2(scope.row,scope.$index)" class>删除</el-button>
                                    </div>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </div>
                          </el-scrollbar>
                          <div class="addgoods textbutton">
                            <i class="el-icon-plus subjectcolor2"></i>
                            <el-button type="text" class @click="addshop(shopTable)">添加门店</el-button>
                          </div>
                        </div>
                        <div class="yb_margin lh16">全店通用、指定门店可用不适用于门店模式三</div>
                      </el-form-item>
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是集点返红包？" name="1">
                            <div>集点返红包是帮助店铺在指定周期内提升用户下单频次的营销活动。开启服务后用户在指定周期内（7、15、30天）完成指定的下单次数（简称点数）即可获得预设的无门槛红包奖励。</div>
                        </el-collapse-item>
                        <el-collapse-item title="用户如何集点？" name="2">
                            <div>1. 用户在本门店下单，并且订单状态为“订单已送达”即视为订单有效，可获得1点点数；</div>
                            <div>2. 若用户在送达前取消订单，则集点任务开启，但是不计入集点；</div>
                            <div>3. 若用户在该订单已送达后申请退款，则其点数不会减少，仍视为有效。</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.用户只有在手机上下单，才能领取和使用</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
      <shopEdit ref="ShopEdit" @fetchData="shopListData"></shopEdit>
    </div>
</template>
<script>
    import {getCollectCouponList,saveCollectCoupon} from "@/api/plug";
    import {changeDate,timestampToTime} from "@/utils/index";
    import shopEdit from '@/views/plugin/plug/components/selectshop';


    export default {
      components: {shopEdit},
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        data() {
            return {
                form: {
                    name: '',
                    money: '1',
                    timeType: '1',
                    storeType: '1',
                    day: '',
                    // cycle: '1',
                    orderType: '1',
                    orderNum: '1',
                    moneyType: '1',
                    isNextDay: '1',
                    // limitType: '1',
                    // useType: ['1'],
                    // userLabel: [],
                    // maxNum: '',
                    // grantNum: '',
                    // orderMoney: '',
                },
                id:'',
                labelOptions:[],
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                timeData2: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName:'',
                shopTable: [],
            }
        },
        methods: {
          async shopListData(data) {
            this.shopTable = data ? data : [];
          },
          open2(row, index) {
            this.$delete(this.shopTable, index);
          },
          addshop(row) {
            if (row) {
              const storeIds = row.map((item) => item.id);
              this.$refs['ShopEdit'].showEdit(storeIds);
            } else {
              this.$refs['ShopEdit'].showEdit();
            }
          },
            async edit(){
                const {data} = await getCollectCouponList({id: this.id})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
                if(this.form.timeType=='1'){
                  this.timeData2 = [timestampToTime(data.useStartTime),timestampToTime(data.useEndTime)]
                }
              if (data.storeInfo) {
                this.shopTable = data.storeInfo ? data.storeInfo : [];
              }
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.form.orderType == '4' && this.form.orderNum==''){
                          this.$baseMessage('请输入订单数量', "error")
                          return
                        }
                        if(this.form.moneyType == '4' && this.form.money==''){
                          this.$baseMessage('请输入红包金额', "error")
                          return
                        }
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        if(this.timeData2){
                            this.form.useStartTime  = changeDate(this.timeData2[0]);
                            this.form.useEndTime = changeDate(this.timeData2[1]);
                        }
                        if (this.shopTable) {
                          this.form.storeArr = this.shopTable.map((item) => item.id);
                        }
                        const {msg} = await saveCollectCoupon(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .time_item .el-input {
        width: 180px;
    }
    .tsradio{
      .el-radio__inner:after {
        top: 6px;
        left: 6px;
      }
      .el-radio {
        margin-right: 15px;
      }
    }
</style>
